<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tree Demos</title>
	<link  href="../jquery.tree.css" rel="stylesheet" type="text/css"  class="view-source"/>
	<link  href="../../../../themes/default/style.css" rel="stylesheet" class="view-source">
	<script src="../../../../scripts/jquery.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/common.js" type="text/javascript" class="view-source"></script>
	<script src="../../../../scripts/browserfix.js" type="text/javascript"  class="view-source"></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../jquery.tree.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">

	
	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

<script class="view-source noparse">
	$(function(){
		var data = {
			id:'11',
			text:'根节点',
			isExpand:true,
			childNodes:[{
				id:'21',
				text:'子节点1',
				showCheck:true, //默认为true
				childNodes:[{
					id:'ss',
					text:'子节点1-1',
					disabled:true,
					childNodes:[{
						id:'baidu',
						disabled:true,
						text:'子节点1-1-1'
					},{
						id:'google',
						text:'子节点1-1-2'
					}]
				}]
			},{
				id:'31',
				text:'子节点2',
				complete:false //表示需要异步加载
			}]
		 };

		var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
		
		$('#event-tree').tree({//tree为容器ID
           	method		:	'post',
           	asyn		:	true, //异步
           	url			:	rootPath + 'data.html',
           	dataProxy	:	{type:'data',value:data}//获取数据方式
           }) ;

		 $('.getCurrentNode').click( function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				$('.value').html('当前节点：<br/>'+ $.json.encode( vals ) ) ;
			} ) ;

			$('.expandAll').click( function(){
				var vals = $('#event-tree').tree().expandAll()  ;
			} ) ;

			$('.expandAllPos').click( function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要收缩的节点，再点击收缩指定节点按钮。');
				}else{
					var vals = $('#event-tree').tree().expandAll(vals.id)  ;
				}
			} ) ;

			$('.expandLevel2').click( function(){
				var vals = $('#event-tree').tree().expandLevel(null ,2)  ;
			} ) ;

			$('.collapseNode').click( function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要收缩的节点，再点击收缩指定节点按钮。');
				}else{
					var vals = $('#event-tree').tree().collapse(vals.id)  ;
				}
			}) ;


			$('.deleteNode').click(function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要删除的节点，再点击删除节点按钮。');
				}else{
					$('#event-tree').tree().deleteNode(vals.id) ;	
				}
			}) ;

			$('.updateNode').click(function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要修改的节点，再点击修改节点按钮。');
				}else{
					$('#event-tree').tree().updateNode( {id:vals.id,text:'已经修改'}) ;	
				}
			}) ;

			var id = 21001 ;
			$('.addNode').click(function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要添加的节点，再点击添加节点按钮。');
				}else{
					$('#event-tree').tree().addNode( {id:(id+1)+"",text:'动态添加',parentId:vals.id}) ;	
				}
			}) ;

			$('.checkNode').click(function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要勾选的节点，再点击勾选节点按钮。');
				}else{
					$('#event-tree').tree().checkNode(vals.id,true) ;	
				}
			}) ;

			$('.unCheckNode').click(function(){
				var vals = $('#event-tree').tree().getCurrentNode()  ;
				if(vals == undefined || vals == null || vals.id == undefined){
					alert('请先点击要勾掉的节点，再点击勾掉节点按钮。');
				}else{
					$('#event-tree').tree().checkNode(vals.id,false) ;	
				}
			}) ;

			$('.refreshNode').click(function(){
				var vals=$('#event-tree').tree().getCurrentNode();
				if(!vals||(!vals.id)){
					alert('请先点击要刷新的节点，再点击刷新节点按钮。');
				}else{
					$('#event-tree').tree().refresh(vals);	
				}
			});

	}) ;
</script>
	
</head>

<body>
   <div style="float:left;width:200px;">
	<hr/>
	<button class='getCurrentNode'>获取当前选中节点对象</button><br/>
	<button class='expandAll'>展开所有节点</button><br/>
	<button class='expandAllPos'>展开指定节点</button><br/>
	<button class='expandLevel2'>展开第二级节点</button><br/>
	<button class='collapseNode'>收缩指定节点</button><br/>
	<button class='deleteNode'>删除节点</button><br/>
	<button class='updateNode'>修改节点</button><br/>
	<button class='addNode'>添加节点</button><br/>
	<button class='refreshNode'>刷新节点</button><br/>
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
		
	</div>
	<div style="clear:both"></div>
	
</body>
</html>